<template>
  <!-- 在线客服 -->
  <div :class="['float0831', isVisible ? 'visible' : 'hidden']" id="floatTools" style="z-index:999">
    <div class="floatL">
      <a class="btnOpen" href="javascript:void(0);" id="aFloatTools_Show" @click="showCustomerService"
        title="查看在线客服">展开</a>
      <a class="btnCtn" href="javascript:void(0);" id="aFloatTools_Hide" @click="hideCustomerService"
        :style="{ display: isVisible ? 'block' : 'none' }" title="关闭在线客服">收缩</a>
    </div>
    <div :class="['floatR']" id="divFloatToolsView">
      <div class="tp"></div>
      <div class="cn">
        <ul>
          <li class="top">
            <h3 class="titZx">QQ咨询</h3>
          </li>
          <li>
            <span class="icoZx">在线咨询</span>
          </li>
          <li>
            <a class="icoTc" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1528048029&amp;site=qq&amp;menu=yes"
              target="_blank">销售中心</a>
          </li>
          <li>
            <a class="icoTc" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2284026544&amp;site=qq&amp;menu=yes"
              target="_blank">售后服务</a>
          </li>
        </ul>
        <ul>
          <li>
            <h3 class="titDh">电话咨询</h3>
          </li>
          <li>
            <span class="icoTl">0755-22671830</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerService',
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    showCustomerService() {
      this.isVisible = true;
      document.getElementById('aFloatTools_Show').style.display = 'none';
      document.getElementById('aFloatTools_Hide').style.display = 'block';
    },
    hideCustomerService() {
      this.isVisible = false;
      document.getElementById('aFloatTools_Show').style.display = 'block';
      document.getElementById('aFloatTools_Hide').style.display = 'none';
    }
  }
}
</script>

<style lang="scss" scoped>
/* 这里不需要添加样式，因为已经在全局样式中定义 */
</style> 